<template>
  <el-dialog
    title="生成登记卡"
    :visible.sync="visible"
    width="790px"
    :show-close="false"
    :before-close="close"
    :close-on-click-modal="false"
  >
    <div class="content" v-if="!isPrint">
      <div class="card">
        <div class="photo">
          <img v-if="info.zp" :src="'data:image/jpg;base64,' + info.zp" />
        </div>
        <div class="name">{{ info.xm }}</div>
        <div class="sex">{{ info.xb }}</div>
        <div class="nation">{{ info.mz }}</div>
        <div class="expiry">{{ info.yxq }}</div>
        <div class="address">{{ info.jzdz }}</div>
        <div class="police">{{ info.fzjg }}</div>
        <div class="no">{{ info.sfzh }}</div>
        <div class="qr-code">
          <img v-if="info.ewm" :src="info.ewm" />
        </div>
      </div>
      <el-checkbox
        class="is-report"
        label="打印成功上报该数据"
        :value="sfsb"
      ></el-checkbox>
    </div>
    <div class="content print-content" id="printCard" v-if="isPrint">
      <img class="bg-print" :src="'data:image/jpg;base64,' + info.bj" />
      <div class="card">
        <div class="photo">
          <img v-if="info.zp" :src="'data:image/jpg;base64,' + info.zp" />
        </div>
        <div class="name">{{ info.xm }}</div>
        <div class="sex">{{ info.xb }}</div>
        <div class="nation">{{ info.mz }}</div>
        <div class="expiry">{{ info.yxq }}</div>
        <div class="address">{{ info.jzdz }}</div>
        <div class="police">{{ info.fzjg }}</div>
        <div class="no">{{ info.sfzh }}</div>
        <div class="qr-code">
          <img v-if="info.ewm" :src="info.ewm" />
        </div>
      </div>
    </div>
    <div class="buttons">
      <el-button class="dialog-btn" @click="submit">打印</el-button>
      <el-button class="dialog-btn" style="display: none;" v-print="'#printCard'" ref="print">打印</el-button>
      <el-button class="dialog-btn outline" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'card-dialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rkbm: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isPrint: false,
      sfsb: true,
      info: {
        zp: '',
        xm: '',
        xb: '',
        mz: '',
        yxq: '',
        jzdz: '',
        fzjg: '',
        sfzh: '',
        ewm: '',
        bj: ''
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.queryPreview(this.rkbm)
    })
  },
  methods: {
    async queryPreview (rkbm) {
      let res = await this.$http(this.$api.priviewPrint, { rkbm: rkbm })
      if (res.code === 200) {
        this.info = {
          zp: res.data.zp ? res.data.zp : '',
          xm: res.data.xm ? res.data.xm : '无',
          xb: res.data.xb ? res.data.xb : '无',
          mz: res.data.mz ? res.data.mz : '无',
          yxq: res.data.qfrq ? res.data.qfrq : '无',
          jzdz: res.data.jzdz ? res.data.jzdz : '无',
          fzjg: res.data.qfjg ? res.data.qfjg : '无',
          sfzh: res.data.gmsfhm ? res.data.gmsfhm : '无',
          ewm: res.data.qrCode ? res.data.qrCode : '',
          bj: res.data.bj ? res.data.bj : ''
        }
        let fzjg = this.info.fzjg
        if (fzjg !== null && fzjg !== undefined && fzjg !== '' && fzjg !== '无') {
          if (fzjg.length > 5 && fzjg.substring(0, 5) === '西藏自治区') {
            this.info.fzjg = fzjg.substring(5)
          }
        }
      }
    },
    close () {
      this.$emit('close', false)
    },
    submit () {
      this.isPrint = true
      this.$refs.print.$el.click()
      setTimeout(() => {
        this.isPrint = false
        this.$emit('submit')
      }, 1000)
    },
    formatDate (val) {
      let date = ''
      if (val.length > 6 && val.length <= 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8)
      } else if (val.length > 8) {
        date = val.slice(0, 4) + '-' + val.slice(4, 6) + '-' + val.slice(6, 8) + ' ' + val.slice(8, 10) + ':' + val.slice(10, 12) + ':' + val.slice(12, 14)
      } else {
        date = val.slice(0, 4) + '-' + val.slice(4, 6)
      }
      return date
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__header {
  padding: 16px 26px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  border-bottom: 1px solid #eeeeee;
}
.content {
  .card {
    margin: 0 auto;
    width: 570px;
    height: 372px;
    background: url("../../../assets/images/bg-card.jpg") no-repeat 50%;
    background-size: 570px 372px;
    /*border-radius: 20px;*/
    position: relative;
    font-family: "Microsoft YaHei", SimHei;
    font-weight: bold;
    > div {
      position: absolute;
      font-size: 15px;
      color: #333;
      /*background-color: #2AC7AF;*/
      /*opacity: 0.6;*/
    }
    .photo {
      top: 136px;
      left: 69px;
      width: 133px;
      height: 169px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .qr-code {
      bottom: 45px;
      right: 40px;
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      top: 69px;
      left: 224px;
    }
    .sex {
      top: 108px;
      left: 224px;
    }
    .nation {
      top: 108px;
      left: 309px;
    }
    .expiry {
      top: 149px;
      left: 224px;
      font-weight: bold;
    }
    .address {
      top: 186px;
      left: 224px;
      width: 290px;
      line-height: 1.2;
    }
    .police {
      top: 247px;
      left: 224px;
      width: 200px;
      line-height: 1.2;
    }
    .no {
      top: 312px;
      left: 224px;
      letter-spacing: 1.8px;
      font-weight: bold;
    }
  }
  &.print-content {
    position: relative;
    overflow: hidden;
    // right: 335px;
    // top: 65px;
    right: 290px;
    top: 113px;
    font-family: 'Microsoft YaHei', SimHei;
    font-weight: bold;
    .bg-print {
      position: absolute;
      top: -138px;
      left: 50%;
      transform: translateX(-50%);
      width: 860px;
    }
    .card {
      background: none;
      .photo {
        top: 108px;
        left: 60px;
      }
      .qr-code {
        bottom: 70px;
        right: 60px;
        width: 100px;
        height: 100px;
      }
      .name {
        top: 56px;
        left: 210px;
      }
      .sex {
        top: 95px;
        left: 210px;
      }
      .nation {
        top: 95px;
        left: 288px;
      }
      .expiry {
        top: 130px;
        left: 210px;
        font-weight: bold;
      }
      .address {
        left: 210px;
        top: 165px;
      }
      .police {
        top: 225px;
        left: 210px;
      }
      .no {
        top: 285px;
        left: 210px;
        font-weight: bold;
        letter-spacing: 1px;
      }
    }
  }
  /deep/ .is-report {
    margin-top: 50px;
    margin-left: 235px;
    .el-checkbox__label {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
    }
  }
}
.buttons {
  padding-top: 20px;
  text-align: center;
  .dialog-btn {
    padding: 0;
    width: 140px;
    height: 40px;
    line-height: 38px;
    border-radius: 0;
    border: 1px solid #02579a;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #02579a;
    margin-left: 20px;
    &.outline {
      color: #02579a;
      background: #fff;
    }
  }
}
</style>
